import { lazy } from 'react';
import { Navigate, RouteObject } from 'react-router-dom';

import { HomeLayout } from '@/layout';
import Login from '@/pages/Login';
import NotFountPage from '@/pages/NotFountPage';
import lazyLoad from '@/route/lazyload';

const About = lazy(() => import('@/pages/About'));
const Profile = lazy(() => import('@/pages/Profile'));

const routes = (isLoggedIn: boolean): RouteObject[] => [
  {
    path: '/',
    element: isLoggedIn ? <HomeLayout /> : <Navigate to="/login" />,
    children: [
      {
        path: '/',
        element: <Navigate to="/label" />
      },
      {
        path: 'about',
        element: lazyLoad(About),
        children: [
          {
            path: ':id',
            element: lazyLoad(Profile)
          }
        ]
      }
    ]
  },
  { path: 'login', element: !isLoggedIn ? <Login /> : <Navigate to="/" /> },
  { path: '*', element: !isLoggedIn ? <Login /> : <NotFountPage /> }
];

export default routes;
